import React, { Component } from 'react';
import { Row, Card, Col, Tabs, Table, List } from 'antd';
import Pie from '@/components/Charts/Pie';
import { connect } from 'dva';
import EvaluateSecondNav from '@/components/EvaluateSecondNav/EvaluateSecondNav';
import getUrlParam from '@/utils/getUrlParam';
import { getComplianceRank, getComplianceStat, getSpecialLetter } from '@/services/api';
import style from './Compliance.less';

const TabPane = Tabs.TabPane;

/**
 * 信披合规
 */
class Compliance extends Component {
  static displayName = 'compliance';

  constructor(props) {
    // console.log("Home",props);
    super(props);
    this.state = {
      rateChartId: 'rateChart', // 信披评级
      industryRateId: 'content_industry_option', // 本行业违规比例
      allRateId: 'content_all_option',
      detailIndustryId: 'deal_industry_option',
      detailAllId: 'deal_all_option',
      numbers: {},
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { rateChartId, industryRateId, allRateId, detailIndustryId, detailAllId } = this.state;
    dispatch({
      type: 'compliance/getRank',
      payload: {
        chartId: rateChartId,
      },
    });
    dispatch({
      type: 'compliance/getStatistics',
      payload: {
        industryRateId,
        allRateId,
        detailIndustryId,
        detailAllId,
      },
    });
    dispatch({
      type: 'compliance/getLetter',
      payload: {
        chartId: rateChartId,
      },
    });
    dispatch({
      type: 'compliance/getViolationDetail',
    });
    dispatch({
      type: 'compliance/getFeedback',
    });
  }

  render() {
    let { letter, violation, feedback } = this.props;
    if (violation) {
      violation = violation.map((item, index) => {
        return {
          ...item,
          no: index + 1,
        };
      });
    }
    const detailColumns = [
      {
        title: '序号',
        dataIndex: 'no',
        key: 'no',
      },
      {
        title: '扣分内容',
        dataIndex: 'title',
        key: 'title',
        render: text => <a href="">{text}</a>,
      },
      {
        title: '处理机构',
        dataIndex: 'process_dept',
        key: 'process_dept',
      },
      {
        title: '扣分类型',
        dataIndex: 'deal_type',
        key: 'deal_type',
      },
      {
        title: '扣分时间',
        dataIndex: 'deal_time',
        key: 'deal_time',
      },
      {
        title: '严重程度',
        dataIndex: 'deal_level',
        key: 'deal_level',
      },
    ];

    return (
      <div className={style.Compliance}>
        <EvaluateSecondNav />
        <Card style={{ margin: '20px 0', borderRadius: '0' }}>
          <div className={style.title}>
            <div className={style.kk} />
            信披评级
          </div>
          <div className="left-chart-box">
            <div
              id={this.state.rateChartId}
              style={{ width: '100%', height: '300px', marginTop: '20px' }}
            />
            {/* <Loading style={{display: 'block'}} visible={this.state.chart_ready} shape="fusion-reactor" color="#fff"></Loading> */}
          </div>
        </Card>

        <Row>
          <Col className="gutter-row" span={12}>
            <div className={style.tabBox}>
              <Tabs defaultActiveKey="1">
                <TabPane tab="本行业" key="1" forceRender>
                  <div
                    id={this.state.industryRateId}
                    style={{ width: '100%', height: '300px', marginTop: '20px' }}
                  />
                </TabPane>
                <TabPane tab="沪深两市" key="2" forceRender>
                  <div
                    id={this.state.allRateId}
                    style={{ width: '100%', height: '300px', marginTop: '20px' }}
                  />
                </TabPane>
              </Tabs>
            </div>
          </Col>
          <Col className="gutter-row" span={12}>
            <div className={style.tabBox}>
              <Tabs defaultActiveKey="1">
                <TabPane tab="本行业" key="1" forceRender>
                  <div
                    id={this.state.detailIndustryId}
                    style={{ width: '100%', height: '300px', marginTop: '20px' }}
                  />
                </TabPane>
                <TabPane tab="沪深两市" key="2" forceRender>
                  <div
                    id={this.state.detailAllId}
                    style={{ width: '100%', height: '300px', marginTop: '20px' }}
                  />
                </TabPane>
              </Tabs>
            </div>
          </Col>
        </Row>

        <Card style={{ margin: '20px 0', borderRadius: '0' }}>
          <div className={style.title}>
            <div className={style.kk} />
            扣分细则
          </div>
          <div className={style.deductTable}>
            <Table columns={detailColumns} dataSource={violation} />
          </div>
        </Card>
        <Row>
          <div className={style.tabBox}>
            <Tabs defaultActiveKey="1">
              <TabPane tab="函件" key="1">
                <List
                  style={{ height: '476px', overflow: 'scroll' }}
                  bordered={false}
                  dataSource={letter}
                  renderItem={item => (
                    <List.Item>
                      <div className={style.listItemWrapper}>
                        {item.title}{' '}
                        <span className={style.publishTime}>{item.published_time}</span>
                      </div>
                    </List.Item>
                  )}
                />
              </TabPane>
              <TabPane tab="监管反馈" key="2">
                <List
                  style={{ height: '476px', overflow: 'scroll' }}
                  bordered={false}
                  dataSource={feedback}
                  renderItem={item => (
                    <List.Item>
                      <div className={style.listItemWrapper}>
                        {item.title}
                        <span className={style.publishTime}>{item.published_time}</span>
                      </div>
                    </List.Item>
                  )}
                />
              </TabPane>
            </Tabs>
          </div>
        </Row>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  letter: state.compliance.letter,
  violation: state.compliance.violation,
  feedback: state.compliance.feedback,
});
export default connect(mapStateToProps)(Compliance);
